<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>烟花绽放</title>
    <style>
        #stage {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100px auto;
            background: #000;
        }

        .launcher {
            position: absolute;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            background: red;
            border-bottom: 3px solid yellow;
        }

        .launcher div {
            position: absolute;
            opacity: 0;
            animation-name: explosion;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            left: 3px;
            top: 3px;
            width: 10px;
            height: 4px;
            border-right: 4px solid yellow;
            border-radius: 2px;
        }

        @keyframes explosion {
            from {
                width: 0;
                opacity: 0;
            }

            33% {
                width: 0;
                opacity: 0;
            }

            34% {
                width: 10px;
                opacity: 1.0;
            }

            40% {
                width: 80px;
                opacity: 1.0;
            }

            to {
                width: 90px;
                opacity: 0;
            }
        }

        @keyframes flight {
            from {
                left: 15%;
                top: 380px;
                width: 6px;
                height: 12px;
            }

            33% {
                left: 30%;
                top: 200px;
                width: 0;
                height: 0;
            }

            to {
                left: 50%;
                top: 100px;
                width: 0;
                height: 0;
            }
        }
    </style>
</head>

<body>
<div id="stage"></div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var num_launchers = 12;
        var num_flares = 20;
        var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'lightgreen', 'white', 'blue'];
        var startTime = Date.now();
        var targetTime = 30000;
        var name = "张晨佩";
        var nameWidth = 0;
        var nameHeight = 0;
        var canvas;
        var ctx;

        function myRandom(from, to) {
            return from + Math.floor(Math.random() * (to - from));
        }

        // 创建canvas元素并添加到stage中，用于后续绘制文字烟花
        canvas = document.createElement('canvas');
        canvas.id = "textCanvas";
        canvas.width = 600;
        canvas.height = 400;
        document.getElementById('stage').appendChild(canvas);
        ctx = canvas.getContext('2d');

        function measureTextSize() {
            ctx.font = "30px Arial";
            nameWidth = ctx.measureText(name).width;
            nameHeight = 30;
        }

        measureTextSize();

        // 封装创建单个烟花的函数
        function createFirework() {
            var launcher = document.createElement('div');
            launcher.className = 'launcher';
            launcher.style.animationName = 'flight';

            for (var j = 0; j < num_flares; j++) {
                var flare = document.createElement('div');
                flare.className = 'flare';
                flare.style.animationName = 'explosion';
                flare.style.backgroundColor = flare_colours[Math.floor(Math.random() * flare_colours.length)];
                launcher.appendChild(flare);
            }

            return launcher;
        }

        // 创建多个烟花并添加到舞台
        for (var i = 0; i < num_launchers; i++) {
            var firework = createFirework();
            document.getElementById('stage').appendChild(firework);
        }

        function checkTime() {
            var currentTime = Date.now();
            if (currentTime - startTime >= targetTime) {
                drawNameWithFireworks();
            } else {
                requestAnimationFrame(checkTime);
            }
        }

        function drawNameWithFireworks() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = "30px Arial";
            ctx.fillStyle = "white";

            for (var k = 0; k < name.length; k++) {
                var charWidth = ctx.measureText(name[k]).width;
                var x = (canvas.width / 2 - nameWidth / 2) + (k * charWidth);
                var y = canvas.height / 2;

                for (var m = 0; m < 50; m++) {
                    var particleX = x + myRandom(-10, 10);
                    var particleY = y + myRandom(-10, 10);
                    drawParticle(particleX, particleY);
                }
            }
        }

        function drawParticle(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 3, 0, 2 * Math.PI);
            ctx.fill();
        }

        requestAnimationFrame(checkTime);
    });
</script>
</body>

</html>